// 图标集合
const svgIcon = {
    // 复制
    get copy() {
        return `
            <?xml version="1.0" encoding="UTF-8"?>
            <svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
                <title>复制备份</title>
                <desc>Created with Sketch.</desc>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="现货销售单复制" transform="translate(-1351.000000, -704.000000)" fill="#444444" fill-rule="nonzero">
                        <g id="编组-12" transform="translate(1351.000000, 704.000000)">
                            <g id="复制备份">
                                <path d="M11.6520106,3.34800683 L11.6520106,13.7940248 L1.20599261,13.7940248 L1.20599261,3.34800683 L11.6520106,3.34800683 Z M11.6520106,2.14350447 L1.20599261,2.14350447 L1.20599262,2.14350447 C0.540765284,2.14267699 0.000820319961,2.68127802 -8.25172847e-06,3.34650536 C-8.25172847e-06,3.34700567 -8.25172847e-06,3.34750598 -8.25172847e-06,3.3480063 L-8.25172847e-06,13.7940243 C-8.25172847e-06,14.4615251 0.539992377,15.0000257 1.20599315,15.0000257 L11.6520112,15.0000257 C12.3180119,15.0000257 12.8565126,14.4600251 12.8565126,13.7940243 L12.8565126,3.3480063 L12.8565126,3.3480063 C12.8565126,2.68277896 12.3172385,2.14350447 11.6520112,2.14350447 C11.6520112,2.14350447 11.6520112,2.14350447 11.6520112,2.14350447 L11.6520106,2.14350447 Z M13.7940102,-3.78723902e-06 L2.74500319,-3.78723902e-06 L2.74500317,-3.78723902e-06 C2.41197495,-3.78723902e-06 2.14200247,0.269969552 2.14200247,0.602997772 C2.14200247,0.936025992 2.41197495,1.20599847 2.74500317,1.20599847 L13.7940102,1.20599847 L13.7940102,12.2550055 L13.7940102,12.2550056 C13.7940102,12.5880338 14.0639826,12.8580063 14.3970109,12.8580063 C14.7300391,12.8580063 15.0000125,12.5880338 15.0000125,12.2550056 L15.0000125,1.20599856 L15.0000125,1.20599708 C15.0008397,0.540769748 14.4622375,0.000824783763 13.7970102,-3.78723902e-06 C13.7960095,-3.78723902e-06 13.7950089,-3.78723902e-06 13.7940083,-3.78723902e-06 L13.7940102,-3.78723902e-06 Z" id="形状"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        `
    },
    // 删除
    get delete() {
        return `
            <?xml version="1.0" encoding="UTF-8"?>
            <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
                <title>CloseOutline备份 2</title>
                <desc>Created with Sketch.</desc>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="现货销售单复制" transform="translate(-1386.000000, -704.000000)" fill="#E64755" fill-rule="nonzero">
                        <g id="编组-17" transform="translate(1386.000000, 704.000000)">
                            <g id="CloseOutline备份2">
                                <path d="M1.69314257,0.200685754 L7.34648899,5.90985255 L12.9994057,0.200685754 L12.9994057,0.200685761 C13.0307548,0.16892674 13.0735308,0.151065977 13.1181559,0.151102305 L14.3994074,0.151102305 L14.3994074,0.151102305 C14.4914547,0.151257151 14.5659484,0.226001806 14.5657937,0.318049374 C14.5657201,0.361780284 14.5484619,0.403730138 14.5177409,0.434852635 L8.22189372,6.79319988 L14.5652409,13.2007073 L14.5652409,13.2007073 C14.6299045,13.266216 14.6292193,13.3717413 14.5637108,13.4364049 C14.5325883,13.4671258 14.4906383,13.4844577 14.4469076,13.4844577 L13.1656561,13.4844577 L13.1656561,13.4844577 C13.1211753,13.4844577 13.0785702,13.4665305 13.0473225,13.4348742 L7.34647604,7.6773675 L1.64521941,13.4348742 L1.6452194,13.4348742 C1.61387034,13.4666332 1.57109432,13.4844577 1.52646926,13.4844577 L0.246051759,13.4844577 L0.246051761,13.4844577 C0.154004388,13.4843028 0.0795107466,13.4095582 0.0796651938,13.3175106 C0.0796651938,13.2737797 0.0969971732,13.2318298 0.127718225,13.2007073 L6.47106545,6.79319988 L0.17521828,0.434852635 L0.175218282,0.434852637 C0.110324652,0.369571897 0.110638519,0.264044626 0.175919383,0.199151191 C0.207178989,0.168076936 0.249474937,0.150685649 0.293551746,0.150685649 L1.57438722,0.150685649 L1.57438722,0.150685649 C1.61901227,0.150685649 1.6617881,0.168510081 1.69313736,0.200269161 L1.69314257,0.200685754 Z" id="路径"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        `
    },
    // 清空
    get clear() {
        return `
            <?xml version="1.0" encoding="UTF-8"?>
            <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
                <title>编组23</title>
                <desc>Created with Sketch.</desc>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="查看调拨" transform="translate(-609.000000, -317.000000)" fill-rule="nonzero">
                        <g id="编组18" transform="translate(609.000000, 317.000000)">
                            <g id="编组23">
                                <g id="编组-8">
                                    <path d="M7,0 C10.8659118,0 14,3.13408816 14,7 C14,10.8659118 10.8659118,14 7,14 C3.13408816,14 0,10.8659118 0,7 C0,3.13408816 3.13408816,0 7,0 Z" id="路径备份-2" fill="#000000" opacity="0.333891369"></path>
                                    <g id="CloseOutline" transform="translate(4.000000, 4.000000)" fill="#FFFFFF">
                                        <path d="M0.790133201,0.093653352 L3.42836153,2.75793119 L6.06638934,0.093653352 L6.06638934,0.0936533551 C6.0810189,0.0788324785 6.10098104,0.0704974557 6.12180607,0.0705144089 L6.71972343,0.0705144089 L6.71972343,0.0705144089 C6.76267887,0.0705866703 6.79744257,0.105467509 6.79737038,0.148423041 C6.79733605,0.168830799 6.78928223,0.188407398 6.77494575,0.20293123 L3.83688374,3.17015994 L6.79711244,6.16033009 L6.79711244,6.16033009 C6.82728876,6.1909008 6.82696902,6.24014595 6.79639838,6.27032227 C6.78187455,6.28465871 6.76229786,6.29274694 6.74189019,6.29274694 L6.14397283,6.29274694 L6.14397283,6.29274694 C6.12321516,6.29274694 6.10333277,6.2843809 6.08875051,6.26960796 L3.42835549,3.5827715 L0.767769056,6.26960796 L0.767769055,6.26960796 C0.753139493,6.28442884 0.733177348,6.29274694 0.712352324,6.29274694 L0.114824154,6.29274694 L0.114824155,6.29274694 C0.0718687144,6.29267465 0.0371050151,6.25779381 0.0371770905,6.21483828 C0.0371770905,6.19443052 0.0452653475,6.17485392 0.0596018382,6.16033009 L3.01983054,3.17015994 L0.0817685306,0.20293123 L0.0817685317,0.202931231 C0.0514848376,0.172466885 0.0516313091,0.123220825 0.0820957119,0.0929372224 C0.0966835283,0.0784359034 0.116421637,0.0703199696 0.136990815,0.0703199696 L0.734714036,0.0703199696 L0.734714036,0.0703199696 C0.75553906,0.0703199696 0.775501115,0.0786380378 0.790130767,0.0934589417 L0.790133201,0.093653352 Z" id="路径"></path>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        `
    }, 
    // 选择（下拉勾）
    get select() {
        return `
            <?xml version="1.0" encoding="UTF-8"?>
            <svg width="12px" height="7px" viewBox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
                <title>down备份15</title>
                <desc>Created with Sketch.</desc>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="现货销售单默认" transform="translate(-1081.000000, -172.000000)" fill="#C6C7CA" fill-rule="nonzero">
                        <g id="编组-5" transform="translate(1081.000000, 172.000000)">
                            <g id="down备份-15">
                                <path d="M11.801289,0.148222478 L11.801289,0.148222482 C12.0326302,0.347284074 12.0665877,0.686247847 11.8791015,0.924968177 L11.8461015,0.963431763 L6.44609522,6.73606869 L6.44609522,6.73606869 C6.2208184,6.97561959 5.83845272,6.99226283 5.59205751,6.77324347 C5.59110859,6.77239998 5.59016244,6.77155355 5.58921906,6.77070418 L5.55396902,6.73606872 L0.153962738,0.963431797 L0.15396276,0.96343182 C-0.0654371045,0.729570708 -0.0482972408,0.367069635 0.19224632,0.153764211 C0.19434637,0.151901963 0.196460247,0.150054492 0.198587789,0.148221969 L0.198587748,0.148222004 C0.430791533,-0.0521646223 0.781360691,-0.0490132515 1.00971369,0.155513611 L1.04608873,0.191060527 L6.000407,5.48700419 L10.9541628,0.191425111 L10.9541628,0.191425082 C11.1636205,-0.0313526837 11.5126005,-0.0636582226 11.7615387,0.116685412 L11.8014763,0.148404199 L11.801289,0.148222478 Z" id="路径"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        `
    }, 
    // 加载（下拉）
    get loading() {
        return `
            <svg
                version="1.1"
                id="loader-1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                width="25px"
                height="25px"
                viewBox="0 0 50 50"
                style="enable-background:new 0 0 50 50;"
                xml:space="preserve"
                >
                <path
                    fill="#10161a66"
                    d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
                    transform="rotate(319.276 25 25)"
                >
                    <animateTransform
                    attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 25 25"
                    to="360 25 25"
                    dur="0.6s"
                    repeatCount="indefinite"
                    />
                </path>
            </svg>
        `
    }, 
}

// 创建text模板
export function createTemplateText({ value, formatter, rowIndex, colIndex }, type) {
    const _value = type == 'count' ? rowIndex + 1 : (formatter ? formatter(value) : value);
    return `<span rowIndex="${rowIndex}" colIndex="${colIndex}">${_value}</span>`;
}

// 创建input模板
export function createTemplateInput({ value, align, disabled, rowIndex, colIndex, placeholder = '', nativeType = 'text' }) {
    value = (value == 0 || value) ? value : '';
    align = align ? `text-align: ${align};` : '';
    disabled = disabled ? `disabled=disabled;` : '';
    return `<div class="input_div" rowIndex="${rowIndex}" colIndex="${colIndex}">
                <input 
                    type="${nativeType}" 
                    value="${value}" 
                    autocomplete="off" 
                    placeholder="${placeholder}" 
                    style="${align}" 
                    ${disabled}>
                </input>
                <span></span>
            </div>`;
}

// 创建select模板
export function createTemplateSelect({ type, name, value, align, disabled, rowIndex, colIndex, placeholder = '' }) {
    align = align ? `text-align: ${align};` : '';
    disabled = disabled ? `disabled=disabled;` : '';
    value = (value == 0 || value) ? value : '';
    const inputValue = type === 'select' ? name : value;
    const readonly = type === 'select' ? 'readonly=readonly' : '';
    const _placeholder = inputValue ? `placeholder=${inputValue}` : `placeholder=${placeholder}`;
    return `<div class="${type}_div" rowIndex="${rowIndex}" colIndex="${colIndex}">
                <input
                    class="select_input"
                    autocomplete="off"
                    style="${align}" 
                    value="${inputValue}"
                    ${readonly}
                    ${disabled}
                    ${_placeholder}
                ></input>
                <div class="triangle">${svgIcon.select}${svgIcon.clear}</div>
                <span></span>
            </div>`;
}

// 创建autocomplete模板
export function createTemplateAutocomplete(context) {
    return createTemplateSelect(context);
}

// 创建select列表容器模板
export function createTemplateSelectBox(type = 'select') {
    return `<div class="ddmg_${type}_box">
                <div class="triangle"></div>
                <div class="list">
                    <ul></ul>
                    <div class="loading">
                        ${svgIcon.loading}
                    </div>
                </div>
            </div>`;
}

// 创建autocomplete列表容器模板
export function createTemplateAutocompleteBox(type = 'autocomplete') {
    return createTemplateSelectBox(type);
}

// 创建select项模板
export function createTemplateSelectLi(value, label) {
    return `<li value=${value}>${label}</li>`;
}

// 创建autocomplete项模板
export function createTemplateAutocompleteLi(value) {
    return `<li>${value}</li>`;
}

// 创建control模板
export function createTemplateControl({ color = '#409eff', copyBtn, deleteBtn, rowIndex, colIndex }) {
    const copyVisible = copyBtn ? '' : 'display: none;';
    const deleteVisible = deleteBtn ? '' : 'display: none;';
    return `<div rowIndex="${rowIndex}" colIndex="${colIndex}">
                <a class='copy' style="color: ${color}; ${copyVisible}">${svgIcon.copy}</a>
                <a class='delete' style="color: ${color}; ${deleteVisible}">${svgIcon.delete}</a>
            </div>`;
}

// 创建scrollbarTd模板
export function createScrollBarTd(width) {
    return `<td style="width: ${width}px; min-width: ${width}px; display: none;" class="scrollbar_td"></td>`;
}


// 创建td模板
export function createTemplateTd({ value = '', type = '', width, height, align, headerAlign }, tdType) {
    width = width ? `width: ${width}px; min-width: ${width}px;` : '';
    height = height ? `height: ${height}px;` : '';
    align = type !== 'text' ? ` text-align: center;` : ` text-align: ${align};`;
    if (tdType == 'header') align = headerAlign ? ` text-align: ${headerAlign};` : align;
    return `<td style="${width + height + align}" class="${type}">${value || ''}</td>`;
}

// 创建tr模板
export function createTemplateTr(value) {
    return `<tr>${value.join('\n')}</tr>`;
}

// 创建表头模板
export function createTemplateHeader(value = '', { width }) {
    const style = (width ? `width: ${width}px;` : '');
    return `<div class="ddmg_header_table" style="${style}">
                <table cellspacing="0" cellpadding="0" border="0" class="ddmg_table">
                    <tbody>${value}</tbody>
                </table>
            </div>`;
}

// 创建表体模板
export function createTemplateBody(value = '', { hover, stripe, width, height, minHeight, maxHeight }) {
    // 生成特定功能className
    const hoverClass = hover && ' hover' || '';
    const stripeClass = stripe && ' stripe' || '';
    const className = `ddmg_body_table${hoverClass}${stripeClass}`;
    // 生成直接样式
    const _width = (width ? `width: ${width}px;` : '');
    const _height = (height ? `height: ${height}px;` : '');
    const _minHeight = (minHeight ? `min-height: ${minHeight}px;` : '');
    const _maxHeight = (maxHeight ? `max-height: ${maxHeight}px;` : '');
    const style = _width + _height + _minHeight + _maxHeight;
    // 返回内容html
    return `<div class="${className}" style="${style}">
                <table cellspacing="0" cellpadding="0" border="0" class="ddmg_table">
                    <tbody>${value.join('\n')}</tbody>
                </table>
            </div>`;
}

// 创建表尾模板
export function createTemplateFooter(value = '', { width }) {
    const style = (width ? `width: ${width}px;` : '');
    return `<div class="ddmg_footer_table" style="${style}">
                <table cellspacing="0" cellpadding="0" border="0" class="ddmg_table">
                    <tbody>${value}</tbody>
                </table>
            </div>`;
}

// 创建fixed表格模板
export function createTemplateFixed(value = '', width) {
    const style = (width ? `width: ${width}px;` : '');
    return `<div class="ddmg_fixed_table" style="${style}">${value}</div>`;
}

// 创建right_patch模板
export function createTemplateRightPatch(width, height) {
    const style = `width: ${width}px; height: ${height}px`;
    return `<div class="ddmg_right_patch" style="${style}"></div>`;
}